<template>
  <Modal
    v-model:active="RemeshModalVueActive"
    transfer
    hide-mask
    draggable
    title="网格重剖分"
    :width="750"
    :height="600"
    confirm-text="网格重剖分"
    @confirm="executeRemeshCreate"
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 24px;">
      <Row :gap="[8]">
        <ConfigProvider :props="providedProps">
          <div style="padding: 10px">
            <Split :value="0.4" style="width: 630px">
              <template #left>
                <div style="padding: 10px">
                  <div :model="formModel">
                    <Column :flex="1">
                      <div class="title">
                        <div class="title_color"></div>
                        <div class="title_content">选择器</div>
                      </div>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem
                        label="实体类型："
                        prop="select"
                        :labelWidth="100"
                        help="选择需要进行网格重剖分的单元或实体"
                      >
                        <Select
                          :options="typeOptions"
                          v-model:value="value"
                        ></Select>
                      </FormItem>
                    </Column>
                    <Divider></Divider>
                    <Column :flex="1">
                      <div class="title">
                        <div class="title_color"></div>
                        <div class="title_content">网格控制设置</div>
                      </div>
                    </Column>
                    <Column :span="6"></Column>
                    <Column :span="21" :offset="3">
                      <FormItem
                        label="网格类型："
                        prop="select"
                        :required="true"
                      >
                        <Select
                          :options="meshTypeOptions"
                          v-model:value="formModel.surfaceMeshOptions.eleType"
                        ></Select>
                      </FormItem>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem
                        label="尺寸类型："
                        prop="select"
                        :required="true"
                      >
                        <Select
                          :options="sizeOptions"
                          v-model:value="
                            formModel.surfaceMeshOptions.sizeOptions
                          "
                        ></Select>
                      </FormItem>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem label="单元尺寸：" :required="true">
                        <Input
                          type="text"
                          v-model:value="
                            formModel.surfaceMeshOptions.meshSizePercentOfBBox
                          "
                        ></Input>
                      </FormItem>
                    </Column>
                  </div>
                </div>
              </template>
              <template #right>
                <div style="padding: 10px">
                  <div>
                    <Column :span="24">
                      <div class="title">
                        <div class="title_color"></div>
                        <div class="title_content">局部网格细化</div>
                      </div>
                    </Column>
                    <Column :span="22" :offset="2">
                      <FormItem
                        label="局部网格调整方式："
                        :labelWidth="180"
                        prop="select"
                        :required="true"
                        help="选择并定义Points、Lines或Edges方实现网格局部细化"
                      >
                        <RadioGroup
                          v-model:value="formModel.refinements.option"
                          @change="handleOptionChange"
                        >
                          <Radio label="point">点</Radio>
                          <Radio label="line">线</Radio>
                        </RadioGroup>
                      </FormItem>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem
                        v-if="formModel.refinements.option === 'point'"
                        label="点1"
                      >
                        <Input
                          type="text"
                          :value="formModel.refinements.point"
                          :readonly="true"
                        ></Input
                      ></FormItem>
                      <FormItem
                        v-if="formModel.refinements.option === 'line'"
                        label="点1"
                      >
                        <Input
                          type="text"
                          :value="formModel.refinements.linePoint1"
                          :readonly="true"
                        ></Input
                      ></FormItem>
                      <FormItem
                        v-if="formModel.refinements.option === 'edge'"
                        label="边"
                      >
                        <Input
                          type="text"
                          :value="formModel.refinements.edge"
                          :readonly="true"
                        ></Input
                      ></FormItem>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem label="点2">
                        <Input
                          type="text"
                          :value="formModel.refinements.linePoint2"
                          :readonly="true"
                        ></Input>
                      </FormItem>
                    </Column>
                    <Column :span="21" :offset="3">
                      <FormItem label="尺寸">
                        <Input
                          type="text"
                          :value="formModel.refinements.size"
                          :readonly="true"
                        ></Input>
                        <Button @click="AddRefinement">增加</Button></FormItem
                      >
                    </Column>
                    <Column :span="21" :offset="3">
                      <div
                        style="
                          margin-left: 5px;
                          height: 150px;
                          overflow: auto;
                          border: 1px solid #ddd;
                          padding: 8px;
                          white-space: nowrap; /* 确保内容不换行 */
                          min-width: 100%; /* 确保内容区域足够宽 */
                        "
                      >
                        <div
                          v-for="(item, index) in refinementParams"
                          :key="index"
                          style="
                            padding: 4px 0;
                            border-bottom: 1px solid #eee;
                            white-space: nowrap; /* 强制不换行 */
                          "
                        >
                          <div v-if="item.point">
                            <span
                              >point: [{{ item.point.join(", ") }}], size:
                              {{ item.size }}</span
                            >
                          </div>
                          <div v-if="item.line">
                            <span
                              >line: [{{ item.line.join(", ") }}], size:
                              {{ item.size }}</span
                            >
                          </div>
                        </div>
                        <div
                          v-if="refinementParams.length === 0"
                          style="color: #999; text-align: center; padding: 10px"
                        >
                          暂无数据
                        </div>
                      </div>
                    </Column>
                  </div>
                </div>
              </template>
            </Split>
          </div>
        </ConfigProvider>
      </Row>
    </NativeScroll>
  </Modal>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import {
  Modal,
  Select,
  Divider,
  Button,
  FormItem,
  ConfigProvider,
  Input,
  NativeScroll,
  Row,
  Column,
  Split,
  Textarea,
  RadioGroup,
  Radio,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
import { STATUS_CODE } from "@/FrontProcessing";
const coreStore = useCoreStore();

let { RemeshModalVueActive } = storeToRefs(coreStore);
const value = ref<number>(1);
const providedProps = {
  default: { clearable: true },
  formItem: { required: true },
};
let formModel = reactive({
  minSize: 0,
  tolerance: 0,
  encryptionAngle: 60,
  mesh2currentComp: 0, // 设置是否剖分当前组件
  remeshOptions: "point",
  surfaceMeshOptions: {
    adaptiveCurvature: 0, // 设置是否自适应曲率
    allowInvalidQuad: 0, // 设置是否允许无效四边形
    eleType: "ETri", // 设置单元类型
    sizeOptions: "Percent of BBox", // 尺寸类型
    enableProximity: 0, // 设置是否亲近
    forceAFT: 0, // 设置是否强制使用FastAFT
    growthRatio: 1.05, // 设置增长率
    maxNumLayer: 1000000, // 设置最大层数
    meshSizePercentOfBBox: 10.0, // 单元尺寸
    sizePriority: 0, // 设置尺寸优先级
  },
  refinements: {
    option: "", // 设置局部网格调整方式
    point: [], // 设置点1
    linePoint1: [], // 设置点1
    linePoint2: [], // 设置点2
    edge: [], // 设置边
    size: 0.1, // 设置尺寸
  },
});
const typeOptions = [
  {
    label: "单元",
    value: 1,
  },
  {
    label: "组件",
    value: 2,
  },
];
const meshTypeOptions = [
  {
    label: "ETri",
    value: "ETri",
  },
  {
    label: "Rtri",
    value: "Rtri",
  },
  {
    label: "Tri/Quad",
    value: "Tri/Quad",
  },
];
const sizeOptions = [
  {
    label: "Percent of BBox",
    value: "Percent of BBox",
  },
  {
    label: "Absolute",
    value: "Absolute",
  },
];
const remeshOptions = [
  {
    label: "点",
    value: "point",
  },
  {
    label: "线",
    value: "line",
  },
  {
    label: "边缘",
    value: "edge",
  },
];
const refinementParams = reactive<any[]>([]);
async function AddRefinement() {
  if (formModel.refinements.option === "point") {
    const { coordinate, pointActor } =
      await _global.Engine.mesh.getSelectSinglePoint();
    const pointParam = {
      point: coordinate,
      pointActor: pointActor,
      size: formModel.refinements.size,
    };
    formModel.refinements.point = pointParam.point; // 存储选中的点坐标
    refinementParams.push(pointParam);
    //清除选中线效果
    _global.Engine.model.remove(pointActor);
    // console.log(refinementParams);
  } else if (formModel.refinements.option === "line") {
    const { lineCoordinate, lineActor } =
      await _global.Engine.mesh.getSelectSingleLine();
    const lineParam = {
      line: lineCoordinate,
      lineActor: lineActor,
      size: formModel.refinements.size,
    };
    formModel.refinements.linePoint1 = lineCoordinate.slice(0, 3); // 存储选中的点坐标
    formModel.refinements.linePoint2 = lineCoordinate.slice(3, 7);
    refinementParams.push(lineParam);
    //清除选中线效果
    _global.Engine.model.remove(lineActor);
    // console.log(refinementParams);
  } else {
    alert("请选择点或线");
  }
}
function handleOptionChange() {
  console.log(formModel.refinements.option);
  if (formModel.refinements.option === "point") {
    _global.Engine.state.set("Mode", STATUS_CODE.SINGLE_POINT_SELECT);
    _global.Engine.unregisterNormalRightClick(); // 注销 normal 右键鼠标事件
    _global.Engine.unregisterSelectSingleLineRightClick();
    _global.Engine.registerSelectSinglePointRightClick(); // 注册 selectPointc 右键鼠标事件
  } else if (formModel.refinements.option === "line") {
    console.log("line");
    _global.Engine.state.set("Mode", STATUS_CODE.SINGLE_LINE_SELECT);
    _global.Engine.unregisterNormalRightClick(); // 注销 normal 右键鼠标事件
    _global.Engine.unregisterSelectSinglePointRightClick();
    _global.Engine.registerSelectSingleLineRightClick(); // 注册 selectPointc 右键鼠标事件
  } else {
    alert("请选择点或线");
  }
}
function transformRefinementData(inputData) {
  return inputData.map((item) => {
    if (item.point) {
      // 处理点数据，保留point和size
      return {
        point: item.point,
        size: item.size,
      };
    } else if (item.line) {
      // 处理线数据，将line改为edge，保留size
      return {
        edge: item.line,
        size: item.size,
      };
    }
    return item; // 其他情况原样返回
  });
}
function executeRemeshCreate() {
  const refinementParam = transformRefinementData(refinementParams);
  _global.Engine.mesh
    .remesh({
      meshSize: Number(formModel.surfaceMeshOptions.meshSizePercentOfBBox),
      sizeType: formModel.surfaceMeshOptions.sizeOptions,
      eleType: formModel.surfaceMeshOptions.eleType,
      refinementParams: refinementParam,
    })
    .then(async () => {
      //清除选点/面效果
      const { pointActor } = await _global.Engine.mesh.getSelectSinglePoint();
      const { lineActor } = await _global.Engine.mesh.getSelectSingleLine();
      if (pointActor) {
        _global.Engine.model.remove(pointActor);
      }
      if (lineActor) {
        _global.Engine.model.remove(lineActor);
      }
      _global.Engine.mesh.setSelectSinglePoint([], null);
      _global.Engine.mesh.setSelectSingleLine([], null);
      //注销右键事件
      _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
      _global.Engine.unregisterSelectSinglePointRightClick(); // 注销 选点 右键鼠标事件
      _global.Engine.unregisterSelectSingleLineRightClick(); // 注册 选线 右键鼠标事件
      _global.Engine.registerNormalRightClick(); // 注册 normal 右键鼠标事件
      console.log("完成了");
    });
}
</script>

<style scoped lang="less">
:deep(.vxp-form) {
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
